<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>电视端统计分析</title>
		<link href="css/index.css" rel="stylesheet" />
		<script type="text/javascript" src="js/echarts.common.min.js"></script>
	</head>

	<body>
		<div class="main">
			<div class="index_top">
				<div class="title">
					<a href="#">
						<img src="images/return.png" />
						<span>统计分析</span>
					</a>
				</div>

			</div>
			<!--数据图表-->
			<div class="chartBox">
				<div class="chartList" style="margin-bottom: 10px;">
					<div id="main" style="width:555px;height:270px;"></div>
				</div>
				<div class="chartList" style="margin-bottom: 10px;">
					<div id="three" style="width:555px;height:270px;"></div>
				</div>
				<div class="chartList">
					<div id="two" style="width:555px;height:270px;"></div>
				</div>
				<div class="chartList">
					<div id="four" style="width:555px;height:270px;"></div>
				</div>
			</div>
		</div>
		<script>
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			option = {
				title: {
					text: '人才统计分析',
					x: 'left',
					textStyle: {
						color: "rgb(51, 51, 51)",
						fontSize: 24,
						fontWeight: "normal"
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					
					top: 40,
					data: ['顶尖人才', '国家级人才', '地方级人才'],
					y: 40,
					padding: 7,
					itemGap: 3,
					x: "left",
					backgroundColor: "rgba(0, 0, 0, 0)",
					itemGap: 5,
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '80%',
					center: ['60%', '50%'],
					data: [
						{ value: 335, name: '顶尖人才' },
						{ value: 310, name: '国家级人才' },
						{ value: 234, name: '地方级人才' },

					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			myChart.setOption(option);

			//折线条
			var myChart2 = echarts.init(document.getElementById('two'));
			option = {
				title: {
					text: "服务趋势分析",
					x: "left",
					textStyle: {
						color: "rgb(51, 51, 51)",
						fontSize: 24,
						fontWeight: "normal"
					}
				},
				tooltip: {
					trigger: "axis"
				},
				legend: {
					data: ["我要审车", "我要看病", "我要出国", "户籍办理"],
					orient: 'vertical',
					
					x: "left",
					backgroundColor: "rgba(0, 0, 0, 0)",
					itemGap: 5,
					y: 40,
					padding:7,
					itemWidth: 20,
        itemHeight: 10,
        itemGap: 10,
				},
				xAxis: [{
					type: "category",
					boundaryGap: true,
					data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					splitLine: {
						show: false
					},
					position: "bottom"
				}],
				yAxis: [{
					type: "value",

					axisTick: {
						interval: 0,
						lineStyle: {
							color: "#333"
						}
					}
				}],
				series: [{
						name: "我要审车",
						type: "line",
						data: [49, 45, 39, 42, 42, 40, 46, 48, 42, 45, 40, 45],
						symbol: "rectangle",
						xAxisIndex: 0,
						itemStyle: {
							normal: {
								color: "rgb(137, 173, 232)",
								lineStyle: {
									width: 1
								}
							}
						},
						symbolSize: 3
					},
					{
						name: "我要看病",
						type: "line",
						data: [37, 32, 31, 39, 31, 32, 30, 34, 37, 39, 32, 33],
						itemStyle: {
							normal: {
								color: "rgb(71, 192, 228)",
								lineStyle: {
									width: 1
								}
							}
						},
						symbol: "rectangle",
						symbolSize: 3
					},
					{
						type: "line",
						name: "我要出国",
						data: [25, 27, 24, 22, 28, 27, 40, 20, 24, 26, 27, 20],
						itemStyle: {
							normal: {
								color: "rgb(10, 139, 177)",
								lineStyle: {
									width: 1
								}
							}
						},
						symbol: "rectangle",
						symbolSize: 3
					},
					{
						type: "line",
						name: "户籍办理",
						data: [10, 18, 16, 12, 18, 12, 14, 16, 18, 17, 20, 10],
						itemStyle: {
							normal: {
								color: "rgb(185, 95, 232)",
								lineStyle: {
									width: 1
								}
							}
						},
						symbol: "rectangle",
						symbolSize: 3
					}
				],
				grid: {
					x: "25%",
					height: "72%",
					width: "70%",
					y: "17%"
				}
			}
			myChart2.setOption(option);
			//柱状图
			var myChart3 = echarts.init(document.getElementById('three'));
			option = {
				title: {
					text: "服务统计分析",
					x: "left",
					textStyle: {
						fontSize: 24,
						fontWeight: "normal"
					},
					subtextStyle: {
						color: "rgb(40, 40, 40)"
					}
				},
				tooltip: {
					trigger: "axis"
				},
				legend: {
					data: ["已完成服务", "总服务"],
					x: "left",
					orient: "vertical",
					y: 40,
					itemGap: 3
				},

				calculable: true,
				xAxis: [{
					type: "category",
					data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					splitLine: {
						show: false,
						lineStyle: {
							color: "rgb(247, 247, 247)"
						}
					},
					splitArea: {
						show: false
					},
					boundaryGap: true,
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgb(170, 189, 204)",
							width: 1
						}
					}
				}],
				yAxis: [{
					type: "value",
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgb(170, 189, 204)",
							width: 1
						}
					}
				}],
				series: [{
						name: "已完成服务",
						type: "bar",
						data: [20, 50, 50, 23.2, 25.6, 76.7, 40, 70, 32.6, 20, 25, 60],
						itemStyle: {
							normal: {
								color: "rgb(97, 160, 168)",
								label: {
									show: false
								}
							}
						},
						barGap: "29%",
						barCategoryGap: "42%",
						smooth: true
					},
					{
						name: "总服务",
						type: "bar",
						data: [50, 80, 90, 26.4, 28.7, 70.7, 60, 55, 48.7, 18.8, 50, 30],
						itemStyle: {
							normal: {
								color: "rgb(194, 53, 49)",
								borderColor: "#C4EAFC"
							}
						},
						barGap: "30%",
						barCategoryGap: "20%",
						smooth: true
					}
				],
				color: ["rgb(255, 127, 80)", "#87cefa", "#da70d6", "#32cd32", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c", "#ffa500", "#40e0d0", "#1e90ff", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371", "#b8860b", "#30e0e0"],
				grid: {
					x: "25%",
					height: "72%",
					width: "70%",
					y: "17%"
				}
			}
			myChart3.setOption(option);
			//服务统计分析
			var myChart4 = echarts.init(document.getElementById('four'));
			option = {
				title: {
					text: "服务评价分析",
					x: "left",
					textStyle: {
						fontSize: 24,
						fontWeight: "normal"
					},
					subtextStyle: {
						color: "rgb(40, 40, 40)"
					}
				},
				tooltip: {
					trigger: "axis"
				},
				legend: {
					data: ["满意", "投诉"],
					x: "left",
					orient: "vertical",
					y: 40,
					itemGap: 3
				},
				calculable: true,
				xAxis: [{
					type: "category",
					data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					splitLine: {
						show: false,
						lineStyle: {
							color: "rgb(247, 247, 247)"
						}
					},
					splitArea: {
						show: false
					},
					boundaryGap: true
				}],
				yAxis: [{
					type: "value"
				}],
				series: [{
						name: "满意",
						type: "bar",
						data: [20, 50, 50, 23.2, 25.6, 76.7, 40, 70, 32.6, 20, 25, 60],
						itemStyle: {
							normal: {
								color: "rgb(171, 171, 171)",
								label: {
									show: false
								}
							}
						},
						barGap: "29%",
						barCategoryGap: "42%",
						smooth: true
					},
					{
						name: "投诉",
						type: "bar",
						data: [50, 80, 90, 26.4, 28.7, 70.7, 60, 55, 48.7, 18.8, 50, 30],
						itemStyle: {
							normal: {
								color: "rgb(232, 127, 70)"
							}
						},
						barGap: "30%",
						barCategoryGap: "20%",
						smooth: true
					}
				],
				color: ["rgb(255, 127, 80)", "#87cefa", "#da70d6", "#32cd32", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c", "#ffa500", "#40e0d0", "#1e90ff", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371", "#b8860b", "#30e0e0"],
				grid: {
					x: "25%",
					height: "72%",
					width: "70%",
					y: "17%"
				}
			}
			myChart4.setOption(option);
		</script>
	</body>

</html>